<%--
  Created by IntelliJ IDEA.
  User: zhangDongFei
  Date: 2020/11/27
  Time: 14:45
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>添加出库</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css" charset="GBK">
    <script src="${pageContext.request.contextPath}/layui/layui.js"></script>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.min.js"></script>
</head>
<style>
    #left {
        width: 40%;
        float: left;
        margin-top: 10px;
    }

    #right {
        width: 60%;
        float: right;
    }

    img {
        width: 100%;
        height: 290px;
    }
</style>
<body>

<div id="left">
    <div id="consume">
        <div class="layui-carousel" id="test1">
            <div carousel-item>
                <div><img src="http://www.hnbsd.cn/uploads/160418/1-16041QG523201.png"></div>
                <div><img src="http://www.hnbsd.cn/uploads/160420/1-160420112920132.png"></div>
                <div><img src="http://www.hnbsd.cn/uploads/160420/1-160420133515131.png"></div>
                <div><img
                        src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2148831039,365272043&fm=26&gp=0.jpg">
                </div>
                <div><img
                        src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606713094289&di=a8a00d11ca25cefd7eb78c3e74f6cf28&imgtype=0&src=http%3A%2F%2Ffiles.b2b.cn%2Fproduct%2FProductImages%2F2013_05%2F22%2F170%2F22170522184.jpg">
                </div>
                <div><img
                        src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1743390559,1063499136&fm=15&gp=0.jpg">
                </div>
                <div><img
                        src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=4176994643,764470338&fm=15&gp=0.jpg">
                </div>
            </div>
        </div>
        <div class="layui-card">
            <div class="layui-card-header"></div>
            <div class="layui-card-body">
                <form class="layui-form" id="addBookForm" lay-filter="addBookForm">
                    <div class="layui-form-item">
                        <label class="layui-form-label">数量(套)</label>
                        <div class="layui-input-inline">
                            <input type="text" name="rkcount" id="rkcount" required lay-verify="required|count"
                                   placeholder="请输入套数"
                                   class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button type="button" class="layui-btn" lay-submit lay-filter="formDemo">添加</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<div id="right">
    <%--数据表格--%>
    <table class="layui-hide" id="test" lay-filter="test"></table>
    <%--提交数据表格内容的表单--%>
    <form class="layui-form" id="ruku">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">总数量(套):</label>
                <div class="layui-input-inline">
                    <input class="layui-input" name="totalcount" id="totalcount" style="border: none" value="0"
                           disabled>
                    <input name="totalcount" id="totalcount2" style="display: none">
                    <input name="rukuid" style="display: none" value="${sessionScope.id}">
                </div>
            </div>

        </div>

        <div class="layui-input-inline">
            <label class="layui-form-label">保洁阿姨:</label>
            <div class="layui-input-inline">
                <select name="jsr" id="bao" lay-verify="required" lay-filter="sid" lay-search>
                    <option value="">请选择或者输入保洁阿姨</option>
                </select>
            </div>
            <button type="button" class="layui-btn" lay-submit lay-filter="ruku">提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </form>

</div>

</body>
<script>
    layui.use(['table', 'form', 'layer', 'carousel'], function () {
        var table = layui.table;
        var form = layui.form;
        var layer = layui.layer;
        var $ = layui.jquery;
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#test1'
            , width: '40%;' //设置容器宽度
            , height: '290px'
            , arrow: 'always' //始终显示箭头
            , autoplay: true
            //,anim: 'updown' //切换动画方式
        });

        //保洁阿姨下拉框填充
        $.ajax({
            url: '${pageContext.request.contextPath}/chuku/queryB',
            type: 'post',
            async: false,
            dataType: 'json',
            success: function (result) {
                var type = result;
                var option = "";
                for (var i = 0; i < type.length; i++) {
                    option += "<option value='" + type[i]['id'] + "'>" + type[i]['name'] + "</option>";
                }
                $("#bao").append(option);
                form.render('select');
            }
        })


        // 渲染数据表格
        var tableData = [];

        table.render({
            elem: '#test'
            , data: tableData
            , toolbar: '#toolbarDemo'
            , totalRow: true
            , cols: [[
                {field: 'name', title: '设施类型', sort: true}
                , {field: 'ssName', title: '设施名称'}
                , {field: 'ssGys', title: '厂商'}
            ]]
        });

        //监听编辑单元格
        table.on('edit(test)', function (obj) {
            var data = obj.data;
            var oldText = $(this).prev().text();  // 单元格编辑之前的值
            var checkCount = /^[1-9]*[1-9][0-9]*$/;

            if (Number(data.rkcount) <= Number(ta)) {
                if (!checkCount.test(data.rkcount)) {
                    $(this).val(oldText);
                    layer.msg("只能是正整数大哥！！！");
                } else {
                    var colIndex = $(obj.tr).attr("data-index");
                    tableData[colIndex].rkcount = data.rkcount;
                    changeTotalMoneyAndCount()
                }
            } else {
                layer.msg("保洁阿姨真没那么多货了啊！你信我！");
            }
        })

        /*监听头部工具栏*/
        table.on('toolbar(test)', function (obj) {
            console.log(obj);
            if (obj.event === 'batchDel') {
                var checkStatus = table.checkStatus('test'),
                    //返回行的value
                    data = checkStatus.data;
                if (data.length > 0) {
                    layer.confirm('确定删除选中的行？', {icon: 3, title: '提示信息'}, function (index) {
                        //layui中找到CheckBox所在的行，并遍历找到行的顺序
                        $("div.layui-table-body table tbody input[name='layTableCheckbox']:checked").each(function () { // 遍历选中的checkbox
                            n = $(this).parents("tbody tr").index();  // 获取checkbox所在行的顺序
                            //从数组中移出选中的数据
                            tableData.splice(n, 1);
                            //移除行
                            $("div.layui-table-body table tbody ").find("tr:eq(" + n + ")").remove();
                            //如果是全选移除，就将全选CheckBox还原为未选中状态
                            $("div.layui-table-header table thead div.layui-unselect.layui-form-checkbox").removeClass("layui-form-checked");
                        });
                        changeTotalMoneyAndCount();
                        layer.close(index);
                    })
                } else {
                    layer.msg("请选择需要删除的行");
                }
            }
            if (obj.event === 'add') {
                layer.msg('add');
            }
        });

        //监听行工具事件
        table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    obj.del(); //删除对应行（tr）的DOM结构
                    var colIndex = $(obj.tr).attr("data-index");
                    tableData.splice(colIndex, 1);
                    table.reload('test', {
                        data: tableData
                    });
                    changeTotalMoneyAndCount()

                    layer.close(index);
                });
            }

        });

        // 添加数据表格表单验证
        form.verify({
            count: [
                /^[0-9]*[1-9][0-9]*$/
                , '数量必须是正整数'
            ]
            , pushprice: [
                /^[1-9]\d*\.?\d*|0\.\d*$/
                , '价格只能是大于0的整数或者小数'
            ]
        });

        // 添加数据表格表单提交
        form.on('submit(formDemo)', function (data) {
            var ta;
            $.ajax({
                url: '${pageContext.request.contextPath}/chuku/queryTa',
                type: 'post',
                async: false,
                success: function (d) {
                    ta = d;
                }
            })
            if (Number(data.field.rkcount) <= Number(ta)) {
                // 如果存在相同的数据，数量++
                if (tableData == null || tableData == "") {

                    layer.msg("添加成功");
                    // 将表单的数据添加到tableData中
                    $.ajax({
                        url: '${pageContext.request.contextPath}/chuku/queryTao',
                        type: 'post',
                        async: false,
                        success: function (result) {
                            tableData = result;
                            // 重新刷新表格
                            table.reload('test', {
                                data: tableData
                            });
                            $("#totalcount").val(Number(data.field.rkcount));
                            $("#totalcount2").val(Number(data.field.rkcount));
                            $("#addBookForm")[0].reset();//刷新表格
                        }
                    })
                    $("#sid").empty() // 清空上次的option残留
                } else {
                    var jia = Number($("#totalcount").val()) + 1;
                    $("#totalcount").empty();
                    $("#totalcount").val(jia);
                    $("#totalcount2").empty();
                    $("#totalcount2").val(jia);
                }
            } else {
                layer.msg("保洁阿姨真没那么多货了啊！你信我！");
            }

            return false;
        });

        // 出库表单 表单提交
        form.on('submit(ruku)', function (data) {

            if (tableData.length === 0) {
                layer.msg("请先添加数据到表格中，再进行入库操作！！！");
            } else {
                $.ajax({
                    url: '${pageContext.request.contextPath}/chuku/add',
                    type: 'post',
                    async: false,
                    data: {data: JSON.stringify(data.field)},
                    success: function (b) {
                        if (b > 0) {
                            layer.msg("等待审核！！！");
                            $("#ruku")[0].reset();
                            tableData = []
                            table.reload('test', {
                                data: tableData
                            });
                        } else {
                            layer.msg("出库失败！！！");
                        }
                    },
                    dataType: 'json'
                })
            }
            return false;
        })

    });

</script>
</html>
